<template>
    <view class="item c-flex_column c-align_center" @click="tapItem">
        <view class="icon-box c-position_relative c-flex_column c-align_center c-justify_center"
            :style="[progressValueStyle]">
            <image class="icon" :src="icon" mode="aspectFit"></image>
            <image class="star c-position_absolute" v-if='starLight' src="/static/images/unit-detail/star_light.png"
                mode="aspectFit">
            </image>
            <image class="star c-position_absolute" v-else src="/static/images/unit-detail/star.png" mode="aspectFit">
            </image>
        </view>
        <view class="title">
            {{title}}
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            icon: {
                type: String,
                default: ""
            },
            title: {
                type: String,
                default: ""
            },
            flag: {
                type: String,
                default: ""
            },
            progress: {
                type: Number,
                default: 30
            }
        },
        computed: {
            progressValueStyle: function() {
                return {
                    "--progress": `${this.progress}%`,
                    "--last": `${100 - this.progress}%`
                };
            },
            starLight: function() {
                return this.progress == 100;
            }
        },
        methods: {
            tapItem() {
                this.$emit("tapItem", {
                    flag: this.flag
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .item {
        padding: 30rpx;

        .icon-box {
            --width: 196rpx;
            --border: 30rpx;
            margin-bottom: 25rpx;
            width: var(--width);
            height: var(--width);
            background: conic-gradient(#ffda17 var(--progress), #f1f1f1 var(--last));
            border-radius: 50%;

            .icon {
                width: calc(var(--width) - var(--border) - var(--border));
                height: calc(var(--width) - var(--border) - var(--border));
                border-radius: 50%;
                border: calc(var(--border) / 2) solid #fff;
                background: #fff;
                z-index: 2;
            }

            .star {
                right: 0;
                bottom: 0;
                transform: translate(0, -50%);
                z-index: 4;

                width: 50rpx;
                height: 50rpx;
            }
        }

        .title {
            font-size: 30rpx;
            font-weight: 700;
            color: #333;
        }
    }
</style>